<template>
  <!-- 搜索用户，返回用户id -->
  <el-select
    v-model="selectIds" :disabled="disabled" :loading="loading" :placeholder="placeholder" :remote-method="page"
    filterable multiple remote reserve-keyword default-first-option
  >
    <el-option
      v-for="item in options" :key="item.id"
      :label="(item.depart?item.depart+',':'')+(item.center?item.center+',':'')+item.cn+','+item.sn"
      :value="item.id"
    />
  </el-select>
</template>
<script>
import {detail, page} from "@/api/system/user";

export default {
  name: "UserIdMultipleSelect",

  props: {
    value: {
      type: Array, default: function () {
        return []
      }
    },
    placeholder: {type: String, default: ''},
    disabled: {type: Boolean, default: false}
  },

  data() {
    return {
      selectIds: [],
      loading: false,
      options: [],
    }
  },
  watch: {
    value(val) {
      //console.log("watch.val:",JSON.stringify(this.val))
      this.options = []
      if (val === null) {
        this.loading = false
      } else {
        val.forEach(ele => {
          detail(ele).then(res => {
            this.options.push({
              id: ele,
              cn: res.data.cn,
              sn: res.data.sn,
              center: res.data.center,
              depart: res.data.depart
            })
          })
        })
      }
      this.selectIds = val
    },
    selectIds(val) {
      this.$emit('input', val)
    }
  },
  // 回显选中的值
  mounted() {
    //console.log("mounted.value:",JSON.stringify(this.value))
    if (this.value != null) {
      this.value.forEach(ele => {
        detail(ele).then(res => {
          this.options.push({
            id: ele,
            cn: res.data.cn,
            sn: res.data.sn,
            center: res.data.center,
            depart: res.data.depart
          })
        })
      })
    }
    this.selectIds = this.value;
  },

  methods: {
    page(query) {
      const form = {
        selectSearch: query,
      }
      page(form, 0, 20).then(res => {
        this.options = res.data.records
      })
    },
  }
}
</script>

<style scoped>

</style>
